<template>
  <div class="topic-container">
    <div class="topic-container__main">
      <div class="topic-container__left">
        <nav-wrap
          width="106px"
          :list="list"
        ></nav-wrap>
      </div>
      <div class="topic-container__center">
        <card-container
          width="816px"
          :title="labelTitle"
        >
          <empty-card v-if="topicList.length === 0" height="556px"></empty-card>

          <topic-card :from="fromType" v-for="(val,index) in topicList" :key="val.topicId" :info="val"></topic-card>
        </card-container>
        <div class="pagination">
          <pagination style="margin: 0 auto;" ref="pagination" :pages="pages" v-on:listenPageChange="changePage"></pagination>
        </div>
      </div>
      <div class="topic-container__right">
        <hot-topic-list ></hot-topic-list>
      </div>
    </div>

  </div>
</template>

<script>
import NavWrap from "../../components/pc/nav/navWrap";
import CardContainer from "../../components/pc/cardContainer";
import Pagination from "../../components/pc/pagination";
import TopicCard from "../../components/pc/topicCard";
import config from '../../action/config';
import EmptyCard from "../../components/pc/emptyCard";
import HotTopicList from '../../components/pc/hotSearchTopicCard'

export default {
  components: {EmptyCard, TopicCard, Pagination, CardContainer, NavWrap,HotTopicList},
  data(){
    return{
      list: [
        {
          label: '最新',
          address: '/topic',
          type: 'new'
        },
        {
          label: '热门',
          address: '/topic',
          type: 'hot'
        },
        {
          label: '关注',
          address: '/topic',
          type: 'following'
        }
      ],
      topicList:[],
      pages:1,
      hotTopicList:[],
      fromType:'',
    }
  },
  created() {
    this.dataGetHotTopic();
    if(!this.$store.state.userProfile.userId){
      this.list=[
        {
          label: '最新',
          address: '/topic',
          type: 'new'
        },
        {
          label: '热门',
          address: '/topic',
          type: 'hot'
        }
      ]
    }
  },
  computed: {
    labelTitle: function () {

      let type =  this.$route.query.type;
      if(type==='new'){
        return '最新话题'
      }
      if(type==='hot'){
        return '热门话题'
      }
      if(type==='following'){
        return '关注话题'
      }
    }
  },
  watch: {
    $route: function (val) {
      this.restartPagination();
    }
  },
  methods:{
    // 最新的话题列表
    dataGetTopicList(currentPage){
      this.fromType = '';

      this.$axios.$get(config.api.get.Topic.list,{
        params:{
          page:currentPage,
          size:10
        }
      }).then((response)=>{
        this.topicList = response.data.dataList;
        this.pages = response.data.totalPage;
      })

    },

    // 关注的话题
    dataGetFollowedTopicList(currentPage) {
      this.fromType = 'notice';
      this.$axios.$get(config.api.get.Topic.myfollowedList,{
        params:{
          page:currentPage,
          size:10
        }
      }).then((response)=>{
        this.topicList = response.data.records;
        this.pages = response.data.pages;
      })
    },
    // 热门话题
    dataGetHotTopicList(currentPage) {
      this.fromType = '';

      this.$axios.$get(config.api.get.Topic.hotList,{
        params:{
          page:currentPage,
          size:10
        }
      }).then((response)=>{
        this.topicList = response.data.dataList;
        this.pages = response.data.totalPage;
      })
    },

    dataGetHotTopic(){
      this.$axios.$get(config.api.get.Topic.hotSearch,{
        params:{
          page:1,
          size:10
        }
      }).then((response)=>{
        this.hotTopicList = response.data.dataList;
      })
    },
    restartPagination(){
      this.topicList= [];
      if(process.browser){
        this.$refs.pagination.setCurrentPage(1)
      }
    },
    changePage(currentPage){
      //返回页数 请求新的数据
      if (this.$route.query.type === 'new') {
        this.dataGetTopicList(currentPage);
      } else if (this.$route.query.type === 'hot') {
        this.dataGetHotTopicList(currentPage);
      } else if (this.$route.query.type === 'following') {
        this.dataGetFollowedTopicList(currentPage);
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  .topic-container{
    > .topic-container__main{
      width: $pageWidth;
      margin: 0 auto;
      padding-top: 16*$length;
      padding-bottom: 32*$length;
      @extend %flex-row-spb;
      align-items: start;
      .topic-container__left{}
      .topic-container__center{
        .pagination{
          margin: 32*$length;
        }
      }
      .topic-container__right{
        .right__write-topic{
          width: 302*$length;
          background-color: #fff;
          @include fontStyle(14,56,500,#00AAE6,center);
          @include border-radius(4*$length);
          @extend %animate-transition;
          &:hover {
            color: #fff;
            background-color: #00AAE6;
          }
        }
        .topic-content__c{
          @extend %flex-row-spb;
          @extend %cursorPointer;
          padding:0 16*$length;
          box-sizing: border-box;
          margin-top:20*$length;
          p{
            width:190*$length;
            @include fontStyle(12,16,500,#333,left);
            @extend %nowrap;
            @extend %animate-transition;

            &:hover{
              color:#00AAE6
            }
          }

          h6{
            @include fontStyle(12,16,500,#ccc,left);
            @extend %nowrap;
          }
        }
      }
    }
  }
</style>
